<template>
	<el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" title="调整记录"
		append-to-body width="850px">
		<div class="detail-adjustment-record">
			<div v-for="item in recordData" :key="item" class="record-item">
				<div class="item-left">
					<span class="item-time">调整时间：{{item.date}}</span>
					<div class="item-status success">
						<img v-if="item.status != 'success'" src="../img/icon-fork.png" alt="">
						<img v-else src="../img/icon-hook.png" alt="">
						<p>{{item.status=='success'?'调整成功':'调整失败'}}</p>
					</div>

				</div>
				<div class="line" />
				<div class="item-right">
					<div class="people-new">
						<p>原审批人</p>
						<p>新审批人</p>
					</div>
					<div class="people">
						<p class="before">{{item.originalAssignee}}</p>
						<img width="30" height="14" v-if="item.status == 'success'" src="../img/icon-blue.png" alt="" />
						<img width="30" height="14" v-else src="../img/icon-yellow.png" alt="" />
						<p class="after" :style="{ color: item.status != 'success' ? '#FF5B00FF' : '#1865F2'}">
							{{item.presentAssignee}}&nbsp;</p>
					</div>

				</div>
			</div>
			<div style="text-align: right" class="dialog-footer">
				<el-button type="primary" @click="handleClose">关闭</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script>
export default defineComponent({
  emits: ['handleClose'],
  props: {
    dialogVisible: {
      type: Boolean,
      require: true,
    },
    recordData: {
      type: Array,
      require: false,
      default: []
    },
  },
  setup(props, context) {
		//  
		const handleClose = () => {
			console.log(props.recordData)
			context.emit('handleClose')
		}
    return {
      handleClose,
    }
  },
});

</script>
<style lang="scss" scoped>




.detail-adjustment-record{
	max-height: 400px;
	overflow: auto;
	.record-item{
		height: 80px;
		background: #F8FAFC;
		border-radius: 2px;
		width: 100%;
		margin-bottom: 12px;
		display: flex;
		padding: 18px;
		justify-content: space-between;
		margin-bottom: 30px;
		.item-left{
			width: 260px;
			.item-status{
				font-size: 14px;
				font-weight: 600;
				color: #262626;
				line-height: 14px;
				margin-bottom: 10px;
				display: flex;
				align-items: center;
				img{
					vertical-align: bottom;
					width: 17px;
					height: 17px;
				}
				p{
					margin: 0;
				}
			}
			.success{
				color: #595959;
			}
			.item-time{
				display: block;
				margin-bottom: 10px;
				font-size: 14px;
				font-weight: 400;
				color: #8C8C8C;
				padding-left: 2px;
			}
		}
		.line{
			height: 42px;
			border: 1px solid #F0F0F0;	
		}
		.item-right{
			width: 450px;
			padding-left: 28px;
			.people{
				display: flex;
				justify-content: space-between;
				align-items: center;
				p{
					margin: 0;
					font-size: 14px;
					font-weight: 600;
					max-width: 200px;
				}
				img {
					margin:0 10px;
				}
			}
			.people-new{
				display: flex;
				justify-content: space-between;
				p{
					margin: 0;
					font-size: 13px;
					color: #8C8C8C;
					margin-bottom: 10px;
					flex:1;
				&:nth-child(2){
						margin-left: 22px;
				}
				}
			}
		}
	}
}
</style>
